<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>桂妈圈 - 睡婴设计</title>
        <style>
            body {
                font-family: 'Microsoft YaHei', sans-serif;
                background-color: #f9f9f9;
                margin: 0;
                padding: 30px;
                color: #333;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
            }
            h1 {
                text-align: center;
                color: #ff9fb5;
                margin-bottom: 40px;
                font-weight: 300;
                font-size: 36px;
            }
            .logo-container {
                background-color: white;
                border-radius: 12px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
                padding: 30px;
                text-align: center;
                transition: all 0.3s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 40px;
            }
            .logo-container:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
            }
            .logo-title {
                margin-top: 25px;
                font-size: 24px;
                color: #333;
                font-weight: 500;
            }
            .logo-desc {
                color: #666;
                font-size: 18px;
                margin-top: 10px;
                line-height: 1.5;
                max-width: 800px;
                text-align: center;
            }
            .download-btn {
                margin-top: 25px;
                padding: 12px 24px;
                background-color: #ff9fb5;
                color: white;
                border: none;
                border-radius: 30px;
                cursor: pointer;
                font-size: 16px;
                transition: all 0.3s ease;
                font-weight: 500;
                letter-spacing: 0.5px;
            }
            .download-btn:hover {
                background-color: #ff8ca7;
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(255, 159, 181, 0.3);
            }
        </style>
    </head>
    <body>
        <h1>桂妈圈 - 睡婴设计</h1>

        <div class="logo-container">
            <svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                <!-- 双手呵护设计 -->
                <g transform="translate(300, 300) scale(2.2)">
                    <!-- 左手 - 母亲的手 -->
                    <path
                        d="M-80,-20 C-60,-60 -20,-80 0,-40 C-10,-50 -30,-40 -40,-20 C-50,0 -70,20 -80,-20 Z"
                        fill="#FF9FB5"
                        opacity="0.8"
                        stroke="#FF9FB5"
                        stroke-width="2"
                    ></path>

                    <!-- 右手 - 父亲的手 -->
                    <path
                        d="M80,-20 C60,-60 20,-80 0,-40 C10,-50 30,-40 40,-20 C50,0 70,20 80,-20 Z"
                        fill="#4682B4"
                        opacity="0.8"
                        stroke="#4682B4"
                        stroke-width="2"
                    ></path>

                    <!-- 中心圆 - 向下移动并保留间隙 -->
                    <circle cx="0" cy="10" r="40" fill="white" stroke="#FF9FB5" stroke-width="1"></circle>

                    <!-- 调整婴儿轮廓位置 -->
                    <g transform="translate(-30, -18) scale(0.055) rotate(0)">
                        <path
                            d="M861.59553 540.888682a116.448166 116.448166 0 0 0-39.602415 74.888217 75.289763 75.289763 0 0 0 19.424759 47.081198s46.378494 35.687347-25.096588 192.239861a344.726727 344.726727 0 0 1-309.390731 168.699262c-45.675789 0.903477-151.031264-17.818577-212.568097-156.753286l-42.965358 37.444108a76.946137 76.946137 0 0 1-80.30908 5.019318c-25.096588-10.339794-34.231745-14.455634-37.092756-15.861043a204.035257 204.035257 0 0 0-27.104315 5.019317c-8.38226 0-8.030908-13.200805-8.030908-13.200805a22.837895 22.837895 0 0 1 9.285738-15.509691 17.818577 17.818577 0 0 1-17.818578-19.073407 16.563748 16.563748 0 0 1 10.691147-17.667997c-17.818577-5.019318-14.806987-17.818577-14.806987-17.818577s0-8.934385 17.818577-15.057953a22.988474 22.988474 0 0 1-9.285737-26.200837s3.764488-8.38226 23.891951-9.63709a23.189247 23.189247 0 0 1-2.509659-37.092756 33.177689 33.177689 0 0 1 44.220188 4.617772 9.63709 9.63709 0 0 0 12.64868-11.745203s-17.818577-15.710464 5.521249-25.849485c-4.617772-22.28577 1.254829-26.55219 1.254829-26.55219a44.571539 44.571539 0 0 1 19.073407-8.38226c-5.872601-34.081166 19.274179-35.687347 19.274179-35.687348s35.687347-5.872601 39.752995 50.996266a115.042757 115.042757 0 0 1 71.324502-32.474984c41.710529-1.254829 90.347715 54.760754 126.085256 107.011849 7.478783-63.293594 56.166163-64.899775 56.166162-64.899775a62.942242 62.942242 0 0 1 52.050323 25.096587 78.803285 78.803285 0 0 1 29.061848-11.042498s10.038635-2.158307 25.096588 15.710464c4.617772 4.11584 8.733612-2.158307 8.733612-2.158307a274.255509 274.255509 0 0 1 103.448134-62.590889l-16.061816-28.359144a247.151194 247.151194 0 0 1-189.027497 15.861043 155.598843 155.598843 0 0 1-67.058082-60.23181 19.274179 19.274179 0 0 0-16.764521-11.042499c-26.200837 2.509659-28.359144-17.818577-28.359143-17.818577a81.513716 81.513716 0 0 1 16.563747-51.347618 27.807019 27.807019 0 0 0-5.521249-40.15454A222.707118 222.707118 0 0 1 346.061429 333.841835a318.525889 318.525889 0 0 1-1.25483-70.270446 238.768934 238.768934 0 0 0-25.096587 77.950001 175.274567 175.274567 0 0 1 35.687347-126.988733 67.058082 67.058082 0 0 1-90.347715-32.474984c-21.583065-46.027142 30.868803-73.482808 30.868803-73.482808a58.02331 58.02331 0 0 0-6.073375 74.386285 54.559981 54.559981 0 0 0 67.560014 15.861044 350.749908 350.749908 0 0 1 318.124344-199.01594c278.371349 21.934418 262.309533 318.827048 262.309533 318.827049a342.769193 342.769193 0 0 1-76.243433 222.255379z m0 0l-727.801039 352.356089z m0 0"
                            fill="#F7DC6F"
                        ></path>
                    </g>

                    <!-- 装饰元素 - 桂花点缀 -->
                    <circle cx="-50" cy="-25" r="5" fill="#FFD700" opacity="0.8"></circle>
                    <circle cx="50" cy="-25" r="5" fill="#FFD700" opacity="0.8"></circle>
                </g>
            </svg>
            <div class="logo-title">亲子呵护</div>
            <div class="logo-desc">
                设计展现了一个淡金色的婴儿轮廓，象征着珍贵的生命。左侧粉色手掌代表母亲的温柔呵护，右侧钢蓝色手掌代表父亲的坚定守护，共同形成一个完整的保护圈。这种色彩搭配既体现了传统的性别色彩认知，又通过柔和的色调展现了现代家庭中父母共同养育的理念。金色的桂花点缀增添了广西地域特色，同时也象征着家庭的幸福与美好。
            </div>
            <button class="download-btn" onclick="downloadSVG()">下载 Logo</button>
        </div>

        <script>
            function downloadSVG() {
                const svg = document.querySelector('svg');
                const serializer = new XMLSerializer();
                let source = serializer.serializeToString(svg);

                // 添加XML声明
                source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

                // 将SVG转换为Blob
                const svgBlob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
                const svgUrl = URL.createObjectURL(svgBlob);

                // 创建下载链接
                const downloadLink = document.createElement('a');
                downloadLink.href = svgUrl;
                downloadLink.download = '桂妈圈_睡婴设计.svg';
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            }
        </script>
    </body>
</html>
